<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script   src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.2/axios.js"></script>
    <title>axios 发送请求</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: 1px solid  pink;
        }
    </style>
</head>
<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
    <div id="result"></div>
    <script>
        const  btns=document.getElementsByTagName("button");
        const r=document.getElementById("result");
        // 1. GET请求
        btns[0].onclick= async function(){
            axios.defaults.baseURL="http://127.0.0.1:8070"
          let result= await  axios.get("/axios-server",{
                params:{
                    id:100,
                    vip:7,
                },
                //请求头信息
                headers:{
                    name:"hcuhen",
                    age:25
                }
            })
            console.log(result)
            r.innerHTML=result.data.name
            // .then(response=>{
            //     console.log(response)
            //     r.innerHTML=response.data.name
            // }).catch(error=>console.log(error))        
        }
        // 2.POST请求
        btns[1].onclick=function(){
            axios.defaults.baseURL="http://127.0.0.1:8070"
            axios.post("/axios-server",{
                    username:"d",
                    password:"s"
                },
                {
                params:{
                    id:100,
                    vip:7,
                },
                //请求头信息
                headers:{
                    name:"hcuhen",
                    age:25
                },     
            }).then(response=>{
                console.log(response)
                r.innerHTML=response.data.name
            }).catch(error=>console.log(error))        
        }
        // 3. AJAX请求
        btns[2].onclick=function(){
            axios.defaults.baseURL="http://127.0.0.1:8070",
            axios({
                //请求方法
                method:"post",
                //url
                url:"/axios-server",
                //url 参数
                params:{
                    name:"胡晨",
                    age:25
                },
                headers:{
                    vip:6,
                    sex:"dd"
                },
                data:{
                    username:"胡晨",
                    password:"12312"
                }
            }).then(response=>r.innerHTML=response.data.name
            ).catch(error=>console.log(error))
        }
    </script>
</body>
</html>